<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		var param = "";
		if(location.search){ // URL에 parameter가 존재하는 경우
			param = location.search.split("?")[1]; // 파라미터 부분 분리
			param = param.split("=")[1]; // 파라미터 값 분리
			// 지금은 파라미터가 하나인 경우...여러개일 경우 추후 생각
		}
		else{ // URL에 parameter가 존재하지 않는 경우
			param = "1";
		}
		
		$.getJSON('JsonTestBoard', // JSON 요청 시작...이 또한 컨트롤러 타고 들어감
				{pageno : param}, // 전달할 데이터 등록 
				function(boardJsonArray){ // callback 함수 작성, 응답으로 받은 데이터 이름은 boardJsonArray
					var html = ""; // html문 작성 
					
					html += "<table>";
					html += "<tr>";
					html += "<td>번호</td>";
					html += "<td>제목</td>";
					html += "<td>글쓴이</td>";
					html += "<td>조회수</td>";
					html += "</tr>";
					
					$.each(boardJsonArray, function(index, boardJson){ // Json배열 순회하며 html문 작성
						// JSON데이터 처리의 jQuery.each( collection, callback(indexInArray, valueOfElement) )
						// collection : 응답으로 전달받은 JSON data
						// callback(indexInArray, valueOfElement) : 실행되는 함수
						// indexInArray : JSON data Array의 index
						// valueOfElement : JSOn data Array의 data
						
						html += "<tr>";
						html += "<td>" + boardJson.board_no + "</td>";
						html += "<td>" + boardJson.board_title + "</td>";
						html += "<td>" + boardJson.board_nickname + "</td>";
						html += "<td>" + boardJson.board_show + "</td>";
						html += "</tr>";						
					});
					
					html += "</table>";
					
					$('#board_list').html(html); // id가 board_list인 요소에 html문 삽입
				}
			 );
	});
</script>
<title>Board</title>
</head>
<body>
<div id="board_list">
</div>
</body>
</html>